import React, { Component } from 'react'
import { queryArticleInfo } from '../../requests/article'
import { RouteComponentProps } from 'react-router-dom'
import ArticleInfo from '../../types/ArticleInfo'
import ArticleType from '../../types/ArticleType'
import {message, Spin} from 'antd'
import './articleDisplay.less'
import RecommendedReq from '../RecommendedReq'
import moment from 'moment'
import {getRes} from "../../configFile";

interface IProps extends RouteComponentProps<{ id: string }> { }
interface IState {
    displayArticleInfo: ArticleInfo
    isLoading: boolean
}

export default class ArticleDisplay extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            isLoading: true,
            displayArticleInfo: {
                articleID: -1,
                articleType: ArticleType.EVALUATION,
                title: '',
                authorID: -1,
                creationTimestamp: -1,
                lastModifiedTimestamp: -1,
                picturePath: '',
                content: ''
            }
        }
    }
    async componentDidMount() {
        const ArticleInfo=getRes( await queryArticleInfo(parseInt(this.props.match.params.id)))
        if (ArticleInfo.isSuccessful) {
            this.setState({
                displayArticleInfo: ArticleInfo.data,
                isLoading: false
            })
        } else {
            message.error("查询失败")
        }

    }
    render() {
        return (
            <div className="frameCardWrapper">
                <div className="flexRow">
                    <div className="leftFrameBox">
                        <Spin spinning={this.state.isLoading}>
                            <div className="articleDisplayTitleBox">
                                <div className="articleTitle"><h1>{this.state.displayArticleInfo.title}</h1></div>
                                <div className="articleInfo">
                                    <div className="authorID">作者ID：{this.state.displayArticleInfo.authorID}</div>
                                    <div className="lastModifiedTimestamp">{moment(this.state.displayArticleInfo.creationTimestamp).format("YYYY-MM-DD")}</div>
                                </div>
                            </div>
                            <div className="articleDisplayContent" dangerouslySetInnerHTML={{ __html: this.state.displayArticleInfo.content }} />
                        </Spin>
                    </div>
                    <div className="rightFrameBox">
                        <RecommendedReq title={'测评文章'} recommendType={ArticleType.KNOWLEDGE} />
                    </div>
                </div>
            </div>
        )
    }
}
